<template>
  <div class="home">
    <header>标题</header>
    <main>
       <router-view/>
    </main>
    <footer>
      <!-- to 要去往的地方 （改变url） -->
      <!-- tag 设置标签名称 -->
      <router-link active-class="active" tag="span" to="/home/homes">首页</router-link>
      <router-link active-class="active" tag="span" to="/home/recommend">推荐</router-link>
      <router-link active-class="active" tag="span" to="/home/app">应用</router-link>
      <router-link active-class="active" tag="span" to="/home/my">我的</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "homes",
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 46px;
    text-align: center;
  }
  main {
    flex: 1;
    overflow: auto;
  }
  footer {
    height: 46px;
    text-align: center;
    display: flex;
    line-height: 46px;
    span {
      flex: 1;
    }
  }
}

.active {
  color: red;
}
</style>